<template>
  <div class="product">
    <!-- 搜索框 -->
    <div class="search">
      <template>
        <el-select
          v-model="searchValue"
          filterable
          clearable
          remote
          @blur="searchBlur"
          @change="searchTextChange"
          reserve-keyword
          @clear="clear"
          placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in searchList"
            :key="item.sId"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </template>
      <!-- 搜索按钮 -->
      <el-button
        type="primary"
        @click="serchButton"
        icon="el-icon-search"
        plain
      ></el-button>
      <!-- 添加按钮 -->
      <el-button type="primary" @click="addStu" v-haspermission="'add'"
        >添加项目</el-button
      >
    </div>
    <!-- 班级选择 -->
    <div class="select-class">
      <!-- 框框 -->
      <el-form>
        <el-form-item label="选择班级:">
          <el-select
            v-model="classes"
            filterable
            @visible-change="classVisible"
            @change="classChange"
            placeholder="请选择"
          >
            <el-option label="全部" value="all"></el-option>
            <el-option
              v-for="(item, index) in classOptions"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 导出excel -->
    <div class="exportExcel">
      <el-button icon="iconfont icon-excel" @click="exportExcel"
        >导出excel数据</el-button
      >
    </div>
    <!-- 表格 -->
    <div class="stu-table">
      <el-table :data="stuData" v-loading="loading" border style="width: 100%">
        <el-table-column
          prop="headimgurl"
          align="center"
          label="头像"
          width="80"
        >
          <template slot-scope="scope">
            <el-avatar
              shape="square"
              :size="50"
              fit="fill"
              :src="scope.row.headimgurl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="class" align="center" label="班级">
        </el-table-column>
        <el-table-column prop="productUrl" align="center" label="项目">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-view"
              @click="$router.push({ name: 'studentProfile' })"
              v-haspermission="'read'"
              >查看</el-button
            >
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-edit"
              @click="editStu(row)"
              v-haspermission="'edit'"
              >编辑</el-button
            >
            <el-button
              type="danger"
              class="btn"
              icon="el-icon-delete"
              @click="deleteStu(row)"
              v-haspermission="'delete'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        hide-on-single-page
        @current-change="changePage"
        :total="total"
        :page-size="dataCount"
      >
      </el-pagination>
    </div>
    <!-- dialog弹出框 -->
    <qf-dialog></qf-dialog>
  </div>
</template>
<script>
import dialog from "../../../components/dialgo";
import { getStuList, addStuDetail, delStu, searchStu, getClasses } from "@/api";
import qee from "qf-export-excel";
export default {
  components: {
    "qf-dialog": dialog,
  },
  data() {
    return {
      params: {
        class: "",
        count: this.dataCount,
      },
      dataPage: "", //页码
      dataCount: 5, //每页展示的数量
      total: 0, //总共的数据条数
      classOptions: [],
      // 表格的数据对象
      stuData: [],
      classes: "",
      searchList: [],
      searchValue: [],
      blurSearchValue: "",
      list: [],
      loading: false, //表格加载动画控制
    };
  },
  methods: {
    // 编辑学员
    editStu(row) {
      // 1、弹出dailog
      // 2、数据回显
      // 3、更改提交
      this.$bus.$emit("editStuEvent", row);
    },
    // 删除学员
    deleteStu(row) {
      console.log(row);
      if (row && row.sId) {
        // 让用户确认是否删除
        this.$confirm("此操作将永久删除该文件, 是否继续?", "删除提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          // 用户确认删除
          .then(() => {
            // 调用删除请求接口
            delStu(row.sId)
              .then((res) => {
                if (res.data && res.data.state) {
                  // 删除成功
                  // console.log(res);
                  this.$message.success("删除成功");
                  this.updateStuTable();
                } else {
                  this.$message.warning("删除失败");
                }
              })
              .catch((err) => {
                this.$message.error("删除出错");
              });
          })
          .catch(() => {
            // 用户取消删除
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        // 没有row
        this.$message.error("没有确认删除对象");
        return;
      }
    },
    // 增加学员
    addStu() {
      // 弹出dialog
      this.$bus.$emit("showDialog");
    },
    // 跟新表格数据
    updateStuTable(params) {
      this.loading = true;
      params = this.params;
      params.count = this.dataCount || "";
      params.page = this.dataPage || "";
      getStuList(params)
        .then((res) => {
          if (res.data && res.data.data) {
            this.stuData = res.data.data;
            this.total = res.data.total; //分页器总数量
            this.loading = false; //关闭表格加载动画控制
          } else {
            this.$message.warning("数据获取失败");
            this.loading = false;
          }
        })
        .catch((err) => {
          this.$message.error("网络异常");
          this.loading = false;
        });
    },
    clear(e) {
      console.log(e);
    },
    // 搜索框选中值发生变化的事件
    searchTextChange(searchText) {
      this.loading = true;
      console.log(searchText);
      // 再次调用搜索接口
      const key = this.searchValue;
      const count = this.dataCount;
      const page = this.dataPage
      const params = {
        key,
        count,
        page
      };
      searchStu(params)
        .then((res) => {
          if (res.data && res.data.data) {
            console.log(res.data.data);
            // 更改表格数据对象
            this.stuData = res.data.data;
            this.total = res.data.total; //对total分页总数进行更改
            this.loading = false;
          } else {
            this.$message.warning("搜索失败");
          }
        })
    },
    //搜索预览
    remoteMethod(query) {
      this.blurSearchValue = query; //键盘弹起的时候获取输入值，赋值三方变量经行输入款内容存储
      const key = query;
      const count = this.dataCount
      const params = {
        key,
        count
      }
      searchStu(params)
        .then((res) => {
          if (res.data && res.data.data) {
            console.log(res.data.data);
            this.searchList = res.data.data; //搜索预览列表
          } else {
            this.$message.warning("搜索失败");
          }
        })
        .catch((err) => {
          this.$message.error("搜索出错");
        });
      console.log(query);
    },
    // 搜索失去焦点，保持搜索框的内容
    searchBlur() {
      // 将存储好的输入框值，设置给select组件
      // console.log(this.searchValue);
      this.searchValue = this.blurSearchValue;
    },
    // 点击搜索按钮
    serchButton() {
      this.loading = true;
      const key = this.blurSearchValue;
      const count = this.dataCount;
      const page = this.dataPage;
      const params = {
        key,
        count,
        page,
      };
      searchStu(params)
        .then((res) => {
          if (res.data && res.data.data) {
            console.log(res.data.data);
            // 更改表格数据对象
            this.stuData = res.data.data;
            this.loading = false;
          } else {
            this.$message.warning("搜索失败");
          }
        })
        .catch((err) => {
          this.$message.error("搜索出错");
        });
    },
    // 选择班级
    classChange(query) {
      const count = this.dataCount;
      this.params = query === "all" ? { count } : { class: query, count };
      this.updateStuTable(this.params);
    },
    //班级选择框 展开/收起触发的事件
    classVisible(isVisible) {
      //  console.log(isVisible);
      if (!isVisible) return;
      // 重置datapage的值，以免后台查询不到
      this.dataPage = 1;
      // 发送获取班级的请求
      getClasses().then((res) => {
        if (res.data && res.data.data) {
          this.classOptions = res.data.data;
        }
      });
    },
    // 导出excel
    exportExcel() {
      let titleList = [
        {
          title: "头像",
          key: "headimgurl",
        },
        {
          title: "姓名",
          key: "name",
        },
        {
          title: "班级",
          key: "class",
        },
        {
          title: "项目",
          key: "productUrl",
        },
      ];
      let dataSource = this.stuData;
      qee(titleList, dataSource, "学员数据");
    },
    // 分页器页码发生改变的时候触发的事件
    changePage(page) {
      this.dataPage = page;
      // 点击分页切换的时候，需要判断是否搜索了，如果搜索了 那么就应该再搜索结果中 第后面页面的结果
      if (this.searchValue) {
        this.serchButton();
        return;
      }
      this.updateStuTable(this.params);
    },
  },
  mounted() {
    // 页面加载  获取表格数据
    this.updateStuTable(this.params);
    this.$bus.$on("updateStuTable", () => {
      this.updateStuTable(this.params);
    });
  },
};
</script>
<style scoped>
.search {
  line-height: 60px;
  text-align: left;
  margin: 20px 0;
}
.select-class {
  line-height: 40px;
  text-align: left;
  margin-bottom: 20px;
}
.stu-table .btn {
  width: 65px;
  height: 25px;
  padding: 0;
}
.pagination {
  margin-top: 20px;
}
</style>
